<template>
    <div class="test_box animated fadeInUp" v-if="isSubmit">
        <div class="left-icon after" @click="selectTopic(dataList.idx - 2)">
            <img src="../../../assets/home/left-icon.png" alt="">
        </div>
        <div class="right-icon after" @click="selectTopic(dataList.idx)">
            <img src="../../../assets/home/right-icon.png" alt="">
        </div>
        <div class="test_title">
            <li>
                <p>{{ dataList.test_title }}</p>
            </li>
            <li>
                <img src="@/assets/home/countDown.png" alt="">
                <span>{{ util.date('i:s', countDown) }}</span>
                <button @click="goexamResults()">交卷</button>
                <button @click="goback">返回</button>
            </li>
        </div>
        <div class="test_list">
            <div class="test_list_title">
                <p>{{ dataList.idx }}、{{ dataList.current.question }}</p>
                <li>
                    <el-radio-group v-model="dataList.radioId">
                        <el-radio  :label="item.id" size="large" v-for="(item, index) in dataList.current.option">{{ item.id
                        }}
                            : {{ item.name }}</el-radio>
                    </el-radio-group>
                </li>
            </div>
            <button class="cardBtn" @click="openCardBox">
                答题卡
            </button>
            <div class="test_list_option" :class="{ isopen: openCard }">
                <span :class="{
                    isover: dataList.radioIdList[index] !== '0',
                    iscurrent: dataList.idx == index + 1
                }" @click="selectTopic(index)" v-for="(item, index) in dataList.currentAll">
                    {{ index + 1 }}
                </span>
            </div>

        </div>
    </div>
    <div v-else>
        <examResults :ResultsId = "examResultsId" @again="agains"></examResults>
    </div>
</template>

<script setup>
import { reactive, ref, onMounted, onBeforeUnmount, onBeforeMount } from 'vue'
import util from '@/utils/util.js'
import examResults from './examResults.vue'
import axios from "axios";
import { useRouter } from 'vue-router'
const router = useRouter()
const countDown = ref(2400)
const openCard = ref(false)
const isSubmit = ref(true)
const examResultsId = ref(null)
const timer = ref(null)
const textId = ref(null)
const dataList = reactive({
    current: [],			//当前题目
    currentAll: [],		//全部题目
    idx: 1,				//当前第几题
    radioIdList: [],
    radioId: '0',
    test_title: ''
})
const selectTopic = (idx) => {
    if (idx >= dataList.currentAll.length || idx < 0) {

    } else {
        // console.log(idx)
        dataList.radioIdList[dataList.idx - 1] = dataList.radioId
        dataList.currentAll[dataList.idx - 1].choose_answer = dataList.radioId
        dataList.radioId = dataList.radioIdList[idx]
        dataList.idx = idx + 1
        dataList.current = dataList.currentAll[idx]
        // console.log(dataList.currentAll)
    }

}
const goexamResults = () => {
    open()
}
const goback = () => {
    router.back()
}
onBeforeMount(() => {
    textId.value = router.currentRoute.value.query.id
    ExamDetail()

})
onMounted(() => {
    timer.value = setInterval(() => {
        countDown.value -= 1
        if (countDown.value <= 0){
            ElMessage({
                type: 'error',
                message: '考试时间到，自动交卷！',
            })
            submit()
        }
    }, 1000)
})
onBeforeUnmount(() => {
    // clearInterval(timer);
    // countDown.value = 2400
})
const openCardBox = () => {
    openCard.value = !openCard.value
}
const open = () => {
    clearInterval(timer.value)
    ElMessageBox.confirm(
        '是否确认交卷',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        submit()
        
    })
        .catch(() => {
            timer.value = setInterval(() => {
                countDown.value -= 1
            }, 1000)
        })
}
const agains = ()=> {
    // console.log("1111111")
    // return
    dataList.radioIdList = []
    dataList.idx = 1
    dataList.radioId = '0'
    ExamDetail()
    isSubmit.value = true
    
}
const ExamDetail = () => {
    axios({
        url: '/Exam/detail',
        baseURL: 'http://kaoshiguanli.haimijiaoyu.com/api/',
        method: 'post',
        data: { exam_cat_id: textId.value }
    }).then(res => {
        // dataList.ExamList = res.data.list
        dataList.currentAll = res.data.data.content_wx.data
        dataList.current = res.data.data.content_wx.data[0]
        dataList.test_title = res.data.data.title
        dataList.currentAll.forEach(val => {
            dataList.radioIdList.push('0')
        })
    })
}
const submit = ()=> {
	
    var data = {
            exam_cat_id: textId.value,
            username: localStorage.getItem('username'),
            title: dataList.test_title,
            use_time: 2400 - countDown.value,
            single: JSON.stringify(dataList.currentAll)
        }
        axios({
            url: '/Exam/submit',
            baseURL: 'http://kaoshiguanli.haimijiaoyu.com/api/',
            method: 'post',
            data
        }).then(res => {
            console.log(res.data.data.id)
            ElMessage({
                type: 'success',
                message: '提交成功！',
            })
            isSubmit.value = false
            examResultsId.value = res.data.data.id
        })
}
</script>

<style lang="scss" scoped>
@media screen and (min-width:1200px) {
    .test_box {
        width: 1000px;
        margin: 0 auto;
        min-height: 500px;
        position: relative;

        .after {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 48px;
            height: 104px;
            background: #D9D9D9;
            position: absolute;
            top: 350px;
            cursor: pointer;

            img {
                width: 11px;
                height: 30px;
            }
        }

        .right-icon {
            right: -48px;
        }

        .left-icon {
            left: -48px;
        }

        .test_title {
            background: #1CABD9;
            display: flex;
            justify-content: space-between;
            width: 1000px;
            height: 77px;
            margin-top: 40px;

            li {
                display: flex;
                align-items: center;
                padding: 25px;

                p {
                    font-size: 20px;
                    font-weight: 600;
                    color: #FFFFFF;
                }

                img {
                    margin-right: 15px;
                    width: 29px;
                    height: 29px;
                }

                span {
                    font-size: 22px;
                    font-family: Microsoft YaHei-Semibold, Microsoft YaHei;
                    font-weight: 600;
                    color: #FFFFFF;
                }

                button {
                    width: 112px;
                    height: 37px;
                    background: #FFFFFF;
                    border-radius: 37px;
                    font-weight: 400;
                    border: none;
                    color: #1CABD9;
                    margin-left: 40px;
                }

                button:last-child {
                    background: #FFFFFF;
                    color: #333333;
                }
            }
        }

        .test_list {
            width: 1000px;
            min-height: 800px;
            background: #F3FCFF;
            border-radius: 10px 10px 10px 10px;
            padding: 30px;
            display: flex;
            justify-content: space-between;

            .cardBtn {
                display: none;
                background-color: #1CABD9;
            }

            .test_list_title {
				
                p {
                    margin-bottom: 15px;
                    max-width: 500px;
                    font-size: 18px;
                    font-weight: 400;
                    color: #333333;
                }
				:deep(.el-radio__input){
					margin-top: 2px;
				}
                :deep(.el-radio__label){
					max-width: 500px;
					color: #1CABD9;
					white-space: break-spaces;
				}
                :deep(.is-checked){
                    .el-radio__inner{
						border-color: #1CABD9;
                    }
                    .el-radio__label{
                        color: #1CABD9;
                    }
					
                }
				:deep(.el-radio){
					display: flex;
					align-items: flex-start;
					height: auto;
					margin-bottom: 20px;
				}
            }

            .test_list_option {
                display: flex;
                flex-wrap: wrap;
                width: 361px;
                height: fit-content;
                border-top: 1px solid #C6C6C6;
                border-left: 1px solid #C6C6C6;

                span {
                    width: 36px;
                    height: 36px;
                    line-height: 36px;
                    cursor: pointer;
                    border-right: 1px solid #C6C6C6;
                    border-bottom: 1px solid #C6C6C6;
                    text-align: center;
                }

                .isover {
                    background-color: #1CABD9;
                    color: #FFFFFF;
                }

                .iscurrent {
                    background-color: #FF9933;
                    color: #FFFFFF;
                }
            }

            .el-radio-group {
                flex-direction: column;
                align-items: flex-start;
            }
        }
    }
}

@media screen and (max-width: 1200px) {
    .test_box {
        width: 95vw;
        margin: 0 auto;
        min-height: 61vh;
        position: relative;

        .after {
            z-index: 9999;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 12vw;
            height: 6vw;
            background: #D9D9D9;
            position: absolute;
            bottom: 2vw;
            cursor: pointer;

            img {
                width: 1.4vw;
                height: 4vw;
            }
        }

        .right-icon {
            right: 6.4vw;
        }

        .left-icon {
            left: 6.4vw;
        }

        .test_title {
            background: #1CABD9;
            display: flex;
            justify-content: space-between;
            width: 95vw;
            // height: 77px;
            margin-top: 40px;

            li {
                display: flex;
                align-items: center;
                padding: 3vw;

                p {
                    font-size: 2.66vw;
                    font-weight: 600;
                    color: #FFFFFF;
                }

                img {
                    margin-right: 2vw;
                    width: 4vw;
                    height: 4vw;
                }

                span {
                    font-size: 2.9vw;
                    font-family: Microsoft YaHei-Semibold, Microsoft YaHei;
                    font-weight: 600;
                    color: #FFFFFF;
                }

                button {
                    width: 14.9vw;
                    height: 4.9vw;
                    font-size: 2.1vw;
                    background: #FFFFFF;
                    border-radius: 4.6vw;
                    font-weight: 400;
                    border: none;
                    color: #1CABD9;
                    margin-left: 3vw;
                }

                button:last-child {
                    background: #FFFFFF;
                    color: #333333;
                }
            }
        }

        .test_list {
            // width: 95vw;
            min-height: 20vh;
            background: #F3FCFF;
            border-radius: 1.2vw;
            padding: 4vw 4vw 12vw 4vw;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            position: relative;

            .cardBtn {
                width: 20vw;
                padding: 1vw 2vw;
                background-color: #1CABD9;
                color: #FFFFFF;
                border: none;
                border-radius: 5vw;
                margin: 3vw 0;
            }

            .test_list_title {
                p {
                    margin-bottom: 2vw;
                    max-width: 95vw;
                    font-size: 2.4vw;
                    font-weight: 400;
                    color: #333333;
                }
                :deep(.el-radio__label){
                    font-size: 2.4vw!important;
                }
                :deep(.is-checked){
                    .el-radio__inner{
                        background: #1CABD9;
                    border-color: #1CABD9;
                    }
                    .el-radio__label{
                        color: #1CABD9;
                        
                    }
                }
				:deep(.el-radio){
					display: flex;
					align-items: flex-start;
					height: auto;
					margin-bottom: 2vw;
				}
				:deep(.el-radio__input){
					margin-top: 2px;
				}
				:deep(.el-radio__label){
					max-width: 95vw;
					color: #1CABD9;
					white-space: break-spaces;
				}
            }

            .test_list_option {
                display: flex;
                flex-wrap: wrap;
                border-left: 1px solid #C6C6C6;
                margin: 0 auto;
                transition: all 0.5s;
                overflow: hidden;
                opacity: 0;

                span {
                    min-width: 7vw;
                    padding: 1.5vw 1vw;
                    cursor: pointer;
                    border-right: 1px solid #C6C6C6;
                    border-bottom: 1px solid #C6C6C6;
                    border-top: 1px solid #C6C6C6;
                    text-align: center;
                    font-size: 1.8vw;
                }

                .isover {
                    background-color: #1CABD9;
                    color: #FFFFFF;
                }

                .iscurrent {
                    background-color: #FF9933;
                    color: #FFFFFF;
                }
            }

            .isopen {
                opacity: 1;
            }

            .el-radio-group {
                flex-direction: column;
                align-items: flex-start;
            }
        }
    }
}
</style>